<template id="component-revisit-log">

    <div class="follow-wrapper clearfix">

        <!-- follow-header  -->
        <div class="follow-header">
            <div class="follow-header--title">{{title}}</div>
        </div>

        <!-- follow-body  -->
        <div class="follow-body">
            <section>
                <div class="comment-list">
                    <!-- day  -->
                    <div class="clearfix" v-for="(value,key) in revisitLogMap">
                        <div class="comment-item-time clearfix">
                            <span class="timedot left"><i class="dot"></i></span>
                            <span class="timedate left">{{key}}</span>
                        </div>
                        <article class="comment-item" v-for="(item,index) in value">
                        <span class="left comment-dot">
                            <i class="fa fa-circle fa-stack-2x"></i>
                            <i class="fa fa-crosshairs fa-stack-1x"></i>
                        </span>
                            <span class="arrow left"></span>
                            <section class="comment-body">
                            <#--备注 头部-->
                                <header class="comment-body--hd clearfix">
                                    <h3 class="user left">
                                        <img :src="item.user.avatarUrl">
                                        <span v-if="item.user.name">{{item.name}}</span>
                                        <span v-else>未知用户</span>
                                        <span class="comment-process" v-if="item.categoryI18n">
                                            <i class="fa fa-caret-right"></i>
                                            <span>{{item.categoryI18n}}</span>
                                        </span>
                                    </h3>
                                    <span class="time right">{{item.time}}</span>
                                </header>
                            <#--备注 内容-->
                                <div class="comment-body--bd">
                                    <div class="comment-body-main">
                                        <div class="comment-body--reply">
                                            <p>{{item.content}}</p>
                                        </div>
                                    <#--<p>销售阶段由 采集库 变为 申报库</p>-->
                                        <div class="pb15"></div>
                                        <div class="comment-body--img">
                                            <a href="javascript:;" v-for="(pic,index) in item.attachments">
                                                <img :id="(pic.imgId)+index" :src="pic.fileUrl" style="max-width:100px;max-height:100px"
                                                     @click="viewerStart((pic.imgId)+index)">
                                            </a>
                                        </div>
                                        <p class="comment-body-time">写跟进时间: {{item.realRevisitAt}} </p>
                                        <div class="tools">
                                            来自交付订单
                                            <div class="comment-btn right inline-cp"
                                                 v-if="item.type != 'LOG'">
                                                <a href="javascript:;"
                                                   @click="viewComments((item.id)+title)">评论({{item.comments.length}})</a>
                                            </div>
                                        <#--<a href="#">郝永生/刘佳莹</a>-->
                                        </div>
                                    </div>
                                <#--评论-->
                                    <div class="reply-lists" style="display: none;"
                                         :id="(item.id)+title">
                                        <div class="reply-lists-item mb10" v-for="piece in item.comments">
                                            <article>
                                                <a href="#" class="left">
                                                    <img class="reply-item-img"
                                                         :src="piece.user.avatarUrl"
                                                         v-if="piece.user.avatarUrl">
                                                </a>
                                                <span class="arrow left"></span>
                                                <section class="comment-body"
                                                         style="margin-bottom: 0px;">
                                                    <header class="comment-body--hd clearfix">
                                                        <h3 class="user left">
                                                            <span v-if="piece.user.name">{{piece.user.name}}</span>
                                                            <span v-else>未知用户</span>
                                                            <span>{{piece.createdAt}}</span>
                                                        </h3>
                                                    </header>
                                                    <div class="comment-body--bd">
                                                        <p v-html="piece.content.replace(/\\r\\n/gm,'<br/>')"></p>
                                                    </div>
                                                </section>
                                            </article>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </article>
                    </div>
                </div>
            </section>
        </div>

    </div>
</template>

<script>
    Vue.component("component-revisit-log", {
        props: ['loggableid', 'loggabletype', 'title'],
        data: function () {
            return {
                //查询结果集
                revisitLogMap: [],
                searchInfo: {
                    loggableid: null,
                    loggabletype: null
                }
            }
        },
        mounted: function () {
        },
        created: function () {
        },
        watch: {
            'loggableid': function () {
                this.findRevisitLogs();
            }
        },
        methods: {
            //查询结果集
            findRevisitLogs: function () {
                var url = contentPath + "/lxRevisitLog/query?loggableId=" + this.loggableid + "&loggableType=" + this.loggabletype;
                this.$http.get(url).then(function (response) {
                    console.log(response.data.data);
                    this.revisitLogMap = response.data.data;
                }, function (error) {
                    swal(error.body.msg);
                });
            },
            //查看评论
            viewComments: function (divId) {
                if ($("#" + divId).css("display") == "none") {
                    $("#" + divId).show(100);
                } else {
                    $("#" + divId).hide(100);
                }
            },
            //查看图片
            viewerStart: function (id) {
                var $image = $("#" + id);
                $image.viewer({
                    inline: false,
                    viewed: function () {
                        $image.viewer();
                    }
                });
            }
        },
        template: '#component-revisit-log'
    })
</script>





